<template>
	<div class="Pmaterial">
		<Pheader class="tou" msg="个人资料"></Pheader>
		<div class="person">
			<p>
				<span>当前头像：</span>
				<span class="perImg"><img src="../assets/images/juzi.png" alt=""></span>
				<span class="changeTel">修改</span>
			</p>
			<p>
				<span>昵称：</span>
				<input type="text" :value="userinfor.phone" disabled="true" class="showInp">
			</p>
			<p>
				<span>性别：</span>
				<el-radio v-model="radio" label="1">男</el-radio>
				<el-radio v-model="radio" label="2">女</el-radio>
			</p>
			<p>
				<span>生日：</span>
				<data3and ref="mesage"></data3and>
			</p>
			<p>
				
				<span>手机：</span>
				<input type="text" :value="userinfor.phone" disabled="true" class="showInp">
				<router-link to="/home/P_material/P_changephon1">
				<span class="changeTel">更换手机</span>
				</router-link>
			</p>
			<Pbutton msg="确认提交" @fun="mymessagesub()" class="suresumit"></Pbutton>
		</div>
    <div>
      <router-view></router-view>
    </div>
	</div>
</template>

<script>
	//头部小组件
	import Pheader from "@/components/P_header.vue";
	//引入Pbutton小组件
	import Pbutton from "@/components/P_button.vue";
	import data3and from "../components/data3and.vue";
import Qs from "qs";
	export default {
		components: {
			Pheader,
			Pbutton,
			data3and
		},
  data() {
    return {
      placeholder:String,
      input: "",
      radio: "1",
      userinfor:null,
    };
  },
  created(){
      this.userinfor=this.$store.state.userinfor;
      window.console.log(this.userinfor);
		},
  methods: {
    mymessagesub() {
      var _this=this;
      var userbornyear = this.$refs.mesage.yearsModel;
      var userbornmonth = this.$refs.mesage.monthsModel;
      var userbornday = this.$refs.mesage.daysModel;
    //   var userphone=localStorage.getItem("userphone")
      // var inputs = document.getElementsByClassName("sex");
      // var usersex = null;
      // if (inputs[0].checked) {
      //   usersex = 1;
      // } else if (inputs[1].checked) {
      //   usersex = 2;
      // }

      let data = Qs.stringify(
        { userbornyear: userbornyear,
          userbornmonth: userbornmonth,
          userbornday: userbornday,
          userphone: 13203853392
         }
        );
      this.$axios({
        method: "post",
        url: "http://localhost:3000/recentlook/mesage",
        data: data,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          _this.list = response.data.result;
          _this.code = response.data.code;
          window.console.log(_this.list);
          if (_this.code == 200) {
            alert("提交成功!!");
          }
        })
        .catch(function(error) {
          _this.data = error;
          alert("error submit!!");
        });
    }
  },
		mounted() {
			// this.init();
		}
	}
</script>

<style>
.Pmaterial {
  width: 100%;
  height: 488px;
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  /* position: absolute;
  top: 0px;
  left: 0px; */
  background: #fff;
  position: relative;
}
.Pmaterial .tou {
  padding: 12px 13px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
}
	.person {
		padding-left:40px;
		padding-top:40px;
	}
	.person span{
		font-size: 17px;
	}
	.person p{
		margin-bottom: 17px;
	}
	.showInp{
  width: 170px;
  height: 35px;
  border:1px solid #e7e7e7;
  padding-left:10px;
  background:#e2dada;
}
	.person p>span:nth-of-type(1){
		display: inline-block;
		text-align: right;
		margin-right: 10px;
	}
	.perImg{
		display: inline-block;
		width:80px;
		height: 80px;
	}
	.perImg img{
		vertical-align: middle;
		width:100%;
	}
	.person .el-input{
		width:170px;
		height:35px;
	}
	.person .el-input input{
		border-radius: 0;
		border:1px solid #d3d3d3;
	}
	.item select{
		width:100px;
		height:35px;
	}
	.changeTel{
		color: #4b943d;
		font-size: 14px;
		margin-left: 20px;
	}
	.suresumit{
		margin-top:20px;
		margin-bottom: 137px;
		margin-left:60px;
		padding: 14px 34px;
	}
</style>
